<script setup lang="ts">
import { secToTime } from '@/lib/util'
import { Clip } from '@/core/clip';
const { clip } = defineProps<{
  clip: Clip
}>()
</script>
<template>
  <div class="clip-wrapper rel">
    <div class="clip-content">
      <div class="img" :style="{ backgroundImage: `url(${clip.thumbnail})` }"></div>
      <div class="footer flex-row flex-content-end">
        <div class="text-overflow title">{{ clip.name }}</div>
        <div class="time">{{ secToTime(clip.duration, false) }}</div>
      </div>
    </div>
  </div>
</template>
<style lang="stylus" scoped>
.clip-wrapper
  padding: 5px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .clip-content
    position: relative;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(0,0,0,.65);
    border-radius: 2px;
    transition: border .2s cubic-bezier(.4,0,1,1) 0s;
    &:hover
      border-color $primary-color
    .img
      width: 100%;
      height: 100%;
      border-radius: 2px;
      background-size: cover;
      background-position: 50%;
.footer
  position: absolute;
  bottom: 0;
  background-color: rgba(0,0,0,.65);
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
  width: 100%;
  padding: 0.4em 20px 0.4em 14px;
  font-size: .7em;
  color: #f9f9f9;
  display: flex
  .title
    display: inline-block;
    width: 126px;
  .time
    display: inline-block;
    text-align: right;
    width: 70px;
</style>